<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/2
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>

<%@ page import="com.limao.CacheManager.CrowdSysProjectCache" %>
<%@ page import="com.limao.DBDataClass.CrowdProjectBuyClass" %>
<%@ page import="com.limao.DBDataClass.CrowdSysDiscussDataClass" %>
<%@ page import="com.limao.DBDataClass.CrowdSysProjectClass" %>
<%@ page import="com.limao.Model.PublicData" %>
<%@ page import="com.limao.servlet.WebFunction" %>
<%@ page import="com.wsu.search.tools.Tools" %>

<%
    //取得url带过来的参数
    String projectid = Tools.RmNull(request.getParameter("projectid"));
    CrowdSysProjectClass crowd = CrowdSysProjectCache.getInstance().load_Goods_Info_ById(CacheClass.getIntValue(projectid));

    PublicData discusses = null;
    discusses = WebFunction.getProjeChatInfo(projectid, "1");

    PublicData surpports = null;
    surpports = WebFunction.getProjectBuyUserInfo(projectid, "1");

%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <script type="text/javascript">

        $(document).ready(function () {
//            图片滑动
            $dragBln = false;
            $(".main_image_detail").touchSlider({
                flexible: true,
                speed: 200,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function (e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });

            $(".main_image_detail").bind("mousedown", function () {
                $dragBln = false;
            });

            $(".main_image_detail").bind("dragstart", function () {
                $dragBln = true;
            });

            $(".main_image_detail a").click(function () {
                if ($dragBln) {
                    return false;
                }
            });
            $(".main_visual_detail").hover(function () {
//                clearInterval(timer);
            }, function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

            $(".main_image_detail").bind("touchstart", function () {
                clearInterval(timer);
            }).bind("touchend", function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            }); 

        });
    </script>
</head>
<body ontouchstart="">
<div class="detailTop pf w100 of">
    <div class="w100 of tc cf f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png"
                                                                                      style="margin-top: 4px;height: 40px;width: 40px;"/></span>
        商品详情
       <!--  <div class="dib of pa" style="right: 10px;">
            <a href="mb/riskWarning.html" class="dib tc">退货说明</a>
        </div> -->
    </div>
</div>

<div class="container jz mgt45">
    <div class="main_visual_detail">
        <div class="flicking_con w100">
            <div class="dib jz">
             <%int stocknum=0; 
         if (crowd != null) 
         {
            
			if((CacheClass.getIntValue(crowd.limitenum)-CacheClass.getIntValue(crowd.supportnum))>0)
			      stocknum=CacheClass.getIntValue(crowd.limitenum)-CacheClass.getIntValue(crowd.supportnum);
                        String[] projectimages = null;
                        if (!TextUtils.isEmpty(crowd.projectimage)) {
                            projectimages = crowd.projectimage.split(";");
                        }

                        if (projectimages != null) {
                            for (int i = 0; i < projectimages.length; i++) {
                                String img = projectimages[i];
                %>
                <a href="#"><%=i%>
                </a>
                <%
                        }
                    }
                    
                    
                %>
            </div>

        </div>

        <div class="main_image_detail">
            <ul>
                <%
                    if (projectimages != null) {
                        for (int i = 0; i < projectimages.length; i++) {
                            String img = projectimages[i];
                %>
                <li><span
                        style="background:url('<%=getImageBasePath(img)%>') center top no-repeat;background-size: cover"
                        ;></span></li>
                <%
                            }
                        }
                    }
                %>
            </ul>
        </div>
    </div>
    <!--main_visual_detail-->
    <section class="proSection pr w100 bcf" style="padding-top: 13px;padding-bottom: 3px;">
        <a class="proName db of clearfix c3 f17">
            <%=crowd.projectname%>
        </a>
        <a class="proMoney db of clearfix mgt10 ">
            <div class="fl tl orange f16">
                &yen;<%=crowd.packageprice%>
            </div>

            <div class="fr tr c9 f14">
               	 送VIP<%=crowd.viplevel%>级：<%=crowd.days%>天
            </div>
        </a>
        <a class="proDetail db of clearfix mgt10 f14">
              <div class="fl tl c6">
             		  购买人次：<%=crowd.supportnum%>
            </div>
            <div class="fr tr c9 f14" style="color:#fa7624">
            	<%if (!TextUtils.isEmpty(crowd.cancalAbout)){%>
            		<img src="mb/images/img11.png" class="fl dib" style="height:16px;margin-top: 3px;"><%=crowd.cancalAbout%>
            	<%} %>
            </div>
        </a>
    </section>
    
     <section class="proSection w100 bcf mgt10 of">
      	<div class="detailCompany w100">
            <h4 class="f14 c3 jz">规格选择</h4>
        </div>
        <div id="guige" class="guige w100 of c3 f14 mgt10 jz">
        <%   String extra = crowd.extra;
        if (!TextUtils.isEmpty(extra)){
        	String[] extras = extra.split(";");
        	for (int i = 0; i < extras.length; i++) {
        		String extrasItems = extras[i]; %>
        		<span <%if(i==0){ %>class="current" <%} %>> <%=extrasItems%></span>
        	<%}%>
         <%}%>
		</div>
		<article class="countDiv clearfix of mgb10 w92 jz">
			  <div for="minus" class="fl db" style="line-height: 34px;margin-right:14px;">数量</div>
			 <input id="minus" name="" type="button" value="-">
			  <input id="count" name="" type="text" value="1" onkeyup="value=this.value.replace(/\D+/g,'')"  class="count br6 bcf fl" style="margin-left: 7px;">
			  <input id="add" name="" type="button" value="+" style="margin-left: 9px;">
		</article>
     </section>
   
    <section class="proSection pr w100 bcf mgt10">
        <div class="detailCompany w100">
            <h4 class="f14 c3 jz">商家</h4>
            <div class="of clearfix jz">
                <img src="<%=getImageBasePath(crowd.companylogo)%>" class="dib fl">
                <div class="fl dib">
                    <h5 class="c3 f14"><%=crowd.companyname%>
                    </h5>
                    <p class="c9 f12" style="margin-top: 3px;"><%=crowd.address%>
                    </p>
                </div>
            </div>
            <!-- <div id="licence" class="of clearfix jz mgt10 mgb10" style="display:none;">
               <a onclick="javascript:licenceImgShow();" class="blue f12 lh2 jz aht db">查看食品流通许可证</a>
            </div> -->
            
        </div>
    </section>
    
     <section class="proSection pr w100 bcf mgt10">
        <div class="detailCompany w100 of">
            <h4 class="f14 c3 jz">商品简介</h4>
            <p class="detailInfo c9 f12 jz">
                <%=crowd.intro%>
            </p>
        </div>
    </section>
	
	<!-- 查询本地数据库用于返回的 -->
	<section id="numData" style="display:none">hahahha</section>
	<section id="lenData" style="display:none">hahahha</section>
	<!-- 查询本地数据库用于返回的 end-->
	
    <div id="introDetail" class="w100 of bcf mgt10">
	    <section class="w100 df">
	        <div class="jz dib tc pr c3 f17" style="line-height:40px;">
	        	<span class="pa" style="height: 2px;width: 23px;top: 19px;right: 78px;background: #666;"></span>
	                                   产品详情
	            <span class="pa" style="height: 2px;width: 23px;top: 19px;left: 78px;background: #666;"></span>                 
	        </div>
	    </section>
       
        <div class="w100 of">
            <article style="display:block;">
                <%
                    String[] introimages = null;
                    if (!TextUtils.isEmpty(crowd.introimage)) {
                        introimages = crowd.projectimage.split(";");
                    }

                    if (introimages != null) {
                        for (int i = 0; i < introimages.length; i++) {
                            String img = introimages[i];
                %>
                <img src="<%=getImageBasePath(img)%>" class="w100 hauto">
                <%
                        }
                    }
                %>
            </article><!--产品-->
        </div>
    </div>
    
    
    <script type="text/javascript" src="mb/js/websql.js"></script>
    <script>
        var projectid = <%=projectid%>;
        var selectextraVal = "";
        var existLen = "";
        var existNum="";
        
        $(function () {
        
            $("#speakTextarea").focus(function () {
                $("html,body").animate({scrollTop: $(".introtab_content").offset().top}, 700);
                $(".detailBottm").hide();
                $(".detailTop").hide();
            });
            $("#speakTextarea").blur(function () {
                $(".detailBottm").show();
                $(".detailTop").show();
            });
            
            
            //获得文本框对象
                  var t = $("#count");

                  //数量增加操作
                  $("#add").click(function(){
                      t.val(parseInt(t.val())+1);
                    
                  })
                  //数量减少操作
                  $("#minus").click(function(){
                      if (parseInt(t.val())==1){
                          return ;
                      }
                      t.val(parseInt(t.val())-1);
                    
                  })
                  
                  
            //规格切换并且获取值      
                  
                     $('#guige>span').click(function () {
                          $(this).siblings().removeClass("current");
         				  $(this).addClass("current");
                     })
       
        });
        
        function buy(){
            selectextraVal=$.trim($('#guige>span.current').text());
            var reg = new RegExp("	","g");//g,表示全部替换。
            selectextraVal=selectextraVal.replace(reg,"" );
            reg = new RegExp("	","g");//g,表示全部替换。
            selectextraVal=selectextraVal.replace(reg,"" );
            reg = new RegExp("\n","g");//g,表示全部替换。
            selectextraVal=selectextraVal.replace(reg,"" );
            
            console.log("selectextraVal"+selectextraVal);
         
        	window.location.href=  "mb/jsp/zhongchouxiadan.jsp?kind=0"+"&projectid="+projectid+"&countNum="+$('#count').val()+"&selectextraVal="+encodeURIComponent(encodeURIComponent(selectextraVal));
        }
        
        
    // 购物车
	function addShoppingCar() {
		
		/* 新建或者打开数据库 */
        websqlOpenDB(); 
        websqlCreatTable(websqlTable);
        
        /*   查数据库里是否存在这条数据 */
        websqlGetAData(websqlTable,'<%=projectid%>',getInsterFLag);
		
    } 
    
  	/*   看数据库里是否存在这条数据,如果存在，拿出条数 ,和之前已经加入的数量*/
    var getInsterFLag = function(){
    
    	var countNum = $('#count').val();
    
    	existLen = $.trim($("#lenData").html());
    	existNum = $.trim($("#numData").html());//已经存在购物车中的商品的数量
    	
    	if(existLen!=""){
        	if(existLen>0){
        	 	var newNum = parseInt(existNum)+parseInt(countNum);
        	 	console.log("总数量"+existNum);
        	 	/* 修改数据 */
        	 	websqlUpdateAData(websqlTable,'<%=projectid%>',newNum); 
        		
        	}else{
		        /* 插入数据 */
		        /* PROID,NAME,PRICE,NUM,IMGURL,GUIGE */
		        var imgStr = '<%=crowd.projectimage%>';
		        var firstImgUrl = imgStr.split(";")[0];
		      	selectextraVal=$.trim($('#guige>span.current').text());
				websqlInsterDataToTable(websqlTable,'<%=projectid%>','<%=crowd.projectname%>','<%=crowd.packageprice%>',countNum,firstImgUrl,selectextraVal); 
        	}
        	showToast('<div class="w100"><img src="mb/images/addCarSuccess.png" class="jz" style="width:30px;"></div><p class="f16 tc w100 mgt10">加入购物车成功！</p>');
        }
    	
    }

    </script>
</div>

<div class="detailBottm pf w100 of clearfix">
    <button onclick="javascript:addShoppingCar();" class="fl db w50 f18 cf f18 tc btnOrange">加入购物车</button>
    <a href="javascript:void(0);" onclick="buy();" class="fr db w50 f18 cf f18 tc btnBlue">购买</a>
</div>
</body>
</html>